
<template>
	<view class="card">
         <view class="card_header">
         	<view class="title">
         		<up-text :lines="2" :text="props.title"></up-text>
         	</view>
			<view class="price">
				<up-text type="error" mode="price" :text="props.price" size="18px"></up-text>
				<view class="numClass">
					<up-text type="success" mode="text" text="库存:" size="12px" style="flex: 1;"></up-text>
					<up-text type="success" mode="text" :text="props.num" size="12px" style="flex:2"></up-text>
				</view>
				
			</view>
         </view>
		 <up-line color="#ff0000"></up-line>
		 <view class="card_foot">
		 	<view class="my_offer">
				<view  style="margin-right: 4px; "><up-tag text="我的报价:" size="mini"></up-tag></view>
				<up-text :text="'￥'+props.otherPrice" size="13" style="margin-left: 3px;width: 73px;"></up-text>
		 	</view>
			<view class="btn_offer">
				<up-button :text="computeButtonText()" icon="bell" type="primary" @click="click"></up-button>
			</view>
		 </view>
	</view>
</template>

<script setup lang="ts">
	import type {MyOfferProps, OhterOfferProps} from '@/utils/page_types'
    const props = defineProps<OhterOfferProps>()
	// 0 未处理  1  已拒绝  2 已接受 ' 
    const computeButtonText=()=>{
        let result='';
        switch(props.status){
            case "0": //未处理
                result='等待对方处理'
                break;
                case "1":
                    result='提高报价'
                    break;
                    case "2":
                        result='联系对方完成交易'
                        break;
        }
        return result;
    }
	const click = ()=>{
		switch(props.status){
			case "1":
				props.reOffer(props.infoId,props.dealUser,props.type);
				break;
			case "2":
				props.contact(props.dealUser);
				break;
			case "0":
				break;
		}
	}
</script>

<style scoped>
  .card{
	  display: flex;
	  flex-direction: column;
	  width: 95%;
	  height: 140px;
	  background-color: white;
	  border-radius: 6px;
	  margin: 5px auto;
	  border: 1px solid #c8c7cc;
  } 
  .card_header{
	  display: flex;
	  justify-content: space-between;
	  height: 80px;
	  align-items: center;
	  padding-left: 18px;
	  padding-right: 18px;
  }
  .title{
	  width: 70%;
	  margin-right: 8px;
  }
  .price{
	  width: 30%;
	  color: red;
	  text-align: center;
	  font-weight: bold;
	  margin-left: 10px;
  }
  .card_foot{
	  height: 60px;
	  display: flex;
	  align-items: center;
	  margin: 1px 8px;
	  justify-content: space-around;
  }
  .my_offer{
	  display: flex;
  }

  .numClass{
	  margin-top: 4px;
	  display: flex;
  }
</style>